<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #block{
            width: 400px;
            height: 400px;
            background-color: #69c;
            margin:0 auto;

            -webkit-transition: background-color 3s; /*鼠标一入一出渐渐动画效果*/
        }

        #block:hover{
            background-color: red;
        }


        .progress-bar{
            height: 40px;
            width: 40px;
            background-color: #69c;
        }
        .progress-bar:hover{
            width: 960px;
        }

        #bar1{
            -webkit-transition: width 5s linear;
        }

        #bar2{
            -webkit-transition: width 5s ease;
        }

        #bar3{
            -webkit-transition: width 5s ease-in; /*慢逐渐变快*/
        }

        #bar4{
            -webkit-transition: width 5s ease-out;
        }

        #bar5{
            -webkit-transition: width 5s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="block">

    </div>



    <div id="wrapper">
        <p>linear</p>
        <div class="progress-bar" id="bar1"></div>

        <p>linear</p>
        <div class="progress-bar" id="bar2"></div>

        <p>linear</p>
        <div class="progress-bar" id="bar3"></div>

        <p>linear</p>
        <div class="progress-bar" id="bar4"></div>

        <p>linear</p>
        <div class="progress-bar" id="bar5"></div>

    </div>

</body>
</html>